<div class="card item" [class.invalid]="isInvalidForm | async">
    <div class="card-header drag-handle">
        <div class="row">
            <div class="col-auto pe-1"><ng-content></ng-content></div>

            <div class="col">
                <div class="truncate">
                    <span class="header-index">#{{ index + 1 }}</span> <span class="header-title">{{ title | async }}</span>
                </div>
            </div>

            <div class="col-auto pe-4">
                <button class="btn btn-text-secondary" (click)="moveTop()" [disabled]="isDisabled || isFirst" title="i18n:contents.arrayMoveTop" type="button">
                    <i class="icon-caret-top"></i>
                </button>
                <button class="btn btn-text-secondary" (click)="moveUp()" [disabled]="isDisabled || isFirst" title="i18n:contents.arrayMoveUp" type="button">
                    <i class="icon-caret-up"></i>
                </button>
                <button class="btn btn-text-secondary" (click)="moveDown()" [disabled]="isDisabled || isLast" title="i18n:contents.arrayMoveDown" type="button">
                    <i class="icon-caret-down"></i>
                </button>
                <button
                    class="btn btn-text-secondary"
                    (click)="moveBottom()"
                    [disabled]="isDisabled || isLast"
                    title="i18n:contents.arrayMoveBottom"
                    type="button">
                    <i class="icon-caret-bottom"></i>
                </button>
                <button
                    class="btn btn-text-secondary"
                    [class.hidden]="!(isCollapsed | async)"
                    (click)="expand()"
                    title="i18n:contents.arrayExpandItem"
                    type="button">
                    <i class="icon-plus-square"></i>
                </button>
                <button
                    class="btn btn-text-secondary"
                    [class.hidden]="isCollapsed | async"
                    (click)="collapse()"
                    title="i18n:contents.arrayCollapseItem"
                    type="button">
                    <i class="icon-minus-square"></i>
                </button>
            </div>

            <div class="col-auto">
                <button class="btn btn-text-secondary" (click)="clone.emit()" [disabled]="isDisabled" title="i18n:contents.arrayCloneItem" type="button">
                    <i class="icon-clone"></i>
                </button>
                <button class="btn btn-text-danger" (click)="itemRemove.emit()" [disabled]="isDisabled" type="button">
                    <i class="icon-bin2"></i>
                </button>
            </div>
        </div>
    </div>

    <div class="card-body" [class.hidden]="isCollapsed | async" *sqxIfOnce="!(isCollapsed | async)">
        @for (section of formModel.sectionsChanges | async; track section) {
            <div class="form-group">
                <sqx-component-section
                    [form]="form"
                    [formContext]="formContext"
                    [formLevel]="formLevel"
                    [formSection]="$any(section)"
                    [hasChatBot]="hasChatBot"
                    [index]="index"
                    [isComparing]="isComparing"
                    [language]="language"
                    [languages]="languages" />
            </div>
        }

        @if (isInvalidComponent | async) {
            <sqx-form-hint> {{ "contents.componentInvalid" | sqxTranslate }} </sqx-form-hint>
        }
    </div>
</div>
